<template>
  <div class="vacation">
    <div class="vacation-title">
      <img src="../../../../static/img/like.png" /> 周末去哪玩
    </div>
    <ul >
      <li class="vacation-item" v-for="item in vacationList" :key="item.id">
        <div class="vacation-img">
          <img :src="item.url" />
        </div>
        <div class="vacation-msg">
          <p>{{item.title}}</p>
          <p>{{item.msg}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    props:['vacationList'],
    data(){
      return{

      }
    }
  }
</script>

<style>
  .vacation {
    margin-top: .2rem;
    background-color: #fff;
    padding: 0 .2rem;
  }
  .vacation-title {
    padding: .2rem 0;
    font-size: .32rem;
  }

  .vacation-title img {
    width: .3rem;
    height: .3rem;
  }
  .vacation-item{
    margin-bottom: .1rem;
    background-color: #fff;
    font-size: .28rem;
  }
  .vacation-img{
    width: 100%;
    height: 0;
    padding-bottom: 37.4375%;
  }
  .vacation-img img{
    width: 100%;
  }
  .vacation-msg{
    padding: .2rem 0 .2rem .2rem;
  }
  .vacation-msg p{
    margin-top: .2rem;
  }
  .vacation-msg p+p{
    color:#616161
  }
</style>
